<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>做人要对自己狠一点</title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }


    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
      transition: width 300ms;
    }

    div ul {
      width: 1300px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
      <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
    </ul>
  </div>
</body>
<script>
  /*
    效果
      0. 动态的把背景图片加入li里面
      1. 鼠标移入，把当前的图片变宽，把其他的图片变小 - 排他
      2. 鼠标移出，把所有的图片恢复原状

    步骤：
      效果1：
        1. 获取元素
        2. 给每个元素分别添加背景图片  发现图片和索引是  索引+1 的关系
      效果2：
        1. 注册鼠标移入事件
        2. 排他的设置每个li的宽度
      效果3：
        1. 注册鼠标移出事件
        2. 把每个图片变回原来的大小
*/
// var box=document.getElementById('box');
// var li=document.querySelectorAll('#box li'); 
//   li.forEach(function(e,i){
//     e.onmouseover=function(){
//       li.forEach(function(a){
//         a.style.width=100+'px';
//       })
//       this.style.width=800+'px';
//     }
//     e.onmouseout=function(){
//       li.forEach(function(m){
//         m.style.width=240+'px';
//       })
//     } 
//   })
// 风琴特效
// 1.当鼠标移入li的时候，鼠标的图片宽度变宽，其它的变小，
// 2.当鼠标移出的时候回复全部li宽度一样
// 步骤
// 1.获取li元素
// 2.通过forEach循环遍历注册li被点击目标事件，
// 3.利用排他法实现点击的li的图片宽度变大，其它的宽度变小
// 4.当鼠标移开时还原
var li=document.querySelectorAll('#box li');
// 合并循环
li.forEach(function(e,i){
  e.onmouseover=function(){
    // 利用遍历排他法修改li的宽度
    li.forEach(function(a){
      a.style.width=100+'px';
    })
    li[i].style.width=800+'px';

  }
  e.onmouseout=function(m){
    m.style.width=240+'px';
  }
})

 
</script>

</html>